<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/common.css" />
		<style type="text/css">
			.mui-bar-nav~.mui-content {
				padding-top: 74px;
			}
			
			.mui-bar-nav {
				border-bottom: 1px solid #ccc;
			}
			
			.nav {
				overflow: hidden;
				position: fixed;
				top: 44px;
				background: #fff;
				width: 100%;
				text-align: center;
				height: 30px;
				line-height: 30px;
				border-bottom: 1px solid #eee;
				z-index: 1000;
			}
			
			.nav>div {
				float: left;
				width: 50%;
			}
			
			.nav .transition {
				width: 50%;
				height: 1px;
				position: absolute;
				bottom: 0;
				left: 0;
				background: #bd212e;
				transition: .2s;
				-webkit-transition: .2s;
			}
			
			.nav>.check {
				color: #bd212e;
			}
			
			.nav>div:nth-child(1).check~.transition {
				left: 0;
			}
			
			.nav>div:nth-child(2).check~.transition {
				left: 50%;
			}
			
			.shopData {
				display: -webkit-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				background: #fff;
				border-bottom: 1px solid #eee;
				padding: 8px 10px 8px 14px;
			}
			
			.shopData_img {
				width: 90px;
				min-width: 90px;
				height: 90px;
				margin-right: 10px;
				display: -webkit-box;
				display: -moz-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			
			.shopData_img img {
				width: 100%;
				vertical-align: middle;
			}
			
			.shopData_text {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				word-break: break-all;
			}
			
			.shopData_main {
				position: relative;
				-webkit-flex: 1;
				flex: 1;
				-webkit-box-flex: 1;
				-moz-box-flex: 1;
				-ms-flex: 1;
			}
			
			.shopData_foot {
				display: -webkit-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				line-height: 26px;
				color: #f52c3d;
				position: absolute;
				width: 100%;
				bottom: 0;
			}
			
			.remove_collection {
				min-width: 80px;
				height: 26px;
			}
			
			.remove_collection>button {
				height: 100%;
				width: 100%;
				padding: 0;
				background: #da2332;
				border-color: #da2332;
				border-radius: 10px;
				font-size: 12px;
			}
			
			.shopData_money {
				-webkit-flex: 1;
				flex: 1;
				-webkit-box-flex: 1;
				-moz-box-flex: 1;
				-ms-flex: 1;
			}
			
			.shopData_money {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				word-break: break-all;
			}
			/*店铺收藏*/
			
			.shopCls {
				display: -webkit-box;
				display: -moz-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: #fff;
				border-bottom: 1px solid #eee;
				padding: 8px 10px 8px 14px;
			}
			
			.shopCls_img {
				width: 100px;
				min-width: 100px;
			}
			
			.shopCls_img>img {
				width: 100%;
				vertical-align: middle;
			}
			/*没有商品*/
			
			.noshopp {
				display: none;
				position: absolute;
				left: 50%;
				top: 50%;
				-webkit-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
				text-align: center;
				font-size: 12px;
				z-index: 10000;
				color: #666;
			}
			
			.noshopp img {
				margin-bottom: 30px;
				width: 50%;
			}
			
			.mui-pull-caption {
				font-weight: normal;
				font-size: 12px;
			}
		</style>
	</head>

	<body>
		<div id="collection" v-cloak>
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-arrowleft mui-pull-left"></a>
				<h1 class="mui-title">我的收藏</h1>
			</header>
			<div class="nav">
				<!--<div class="check">收藏商品</div>
				<div>收藏店铺</div>-->
				<div :class="{check:checkNum==index}" v-for="(tapData,index) in tapData" @tap="checkTap(index)">
					{{tapData.texts}}
				</div>
				<span class="transition"></span>
			</div>

			<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
				<div class="mui-scroll">
					<div v-for="(list,index) in list">
						<!--收藏商品-->
						<div class="shopData" v-if="checkNum==0" @tap.stop="openDetail(list)">
							<div class="shopData_img"><img v-lazy="imgCommonUrl + list.pic" /></div>
							<div class="shopData_main">
								<div class="shopData_text">{{list.prodName}}</div>
								<div class="shopData_foot">
									<div class="shopData_money">¥{{list.cash}}</div>
									<div class="remove_collection"><button type="button" class="mui-btn mui-btn-danger" @tap.stop="removeShopping(list,index)">删除收藏</button></div>
								</div>
							</div>
						</div>
						<!--收藏店铺-->
						<div class="shopCls" v-else @tap.stop="openshop(list)">
							<div class="shopCls_img"><img v-lazy="imgCommonUrl + list.shopPic" /></div>
							<div>{{list.siteName}}</div>
							<div class="remove_collection"><button type="button" class="mui-btn mui-btn-danger" @tap.stop="removeShop(list,index)">删除收藏</button></div>
						</div>
					</div>
					<div></div>
				</div>
			</div>

			<div class="noshopp">
				<img src="../../images/noshop.png" alt="" />
				<div v-text="checkNum==0 ? '还没有收藏，赶快去收藏喜欢的产品':'还没有收藏，赶快去收藏喜欢的店铺'"></div>
			</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/libs/vue.js"></script>
		<script src="../../js/libs/vue-lazyload.js"></script>
		<script src="../../js/libs/zepto.js"></script>
		<script src="../../js/common.js"></script>
		<script type="text/javascript">
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					up: {
						auto: true,
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			Vue.use(VueLazyload, {
				preLoad: 1.3,
				error: '../../images/loadImg/advert_one_min.png',
				loading: '../../images/loadImg/advert_one_min.png'
			});
			var collection = new Vue({
				el: '#collection',
				data: {
					imgCommonUrl: common.imageUrl,
					tapData: [{
							texts: '收藏商品',
							urls: '/userCenter/collect',
						},
						{
							texts: '收藏店铺',
							urls: '/userCenter/collectShop',
						}
					],
					checkNum: 0,
					list: [],
					pageNum: 1,
					swith: false
				},
				methods: {
					// 切换
					checkTap: function(index) {
						if(this.checkNum == index) {
							return
						}
						this.pageNum = 1
						this.checkNum = index
						this.list = []
						$('.mui-pull-bottom-pocket').css('display', 'block !important')
						$(".noshopp").hide()
						mui('#pullrefresh').pullRefresh().refresh(true);
						mui('#pullrefresh').pullRefresh().pullupLoading();
						mui('#pullrefresh').pullRefresh().scrollTo(0, 0, 0.1);
					},
					//					删除商品
					removeShopping: function(data, index) {
						if(collection.swith) {
							return
						}
						collection.swith = true
						common.ajax('/product/addInterest', {
							prodId: data.prodId
						}, function(data) {
							collection.swith = false
							if(data.code == 1) {
								collection.list.splice(index, 1)
								if(collection.list.length <= 0) {
									mui('#pullrefresh').pullRefresh().refresh(true);
									mui('#pullrefresh').pullRefresh().pullupLoading();
									mui('#pullrefresh').pullRefresh().scrollTo(0, 0, 0.1);
								}
							} else {
								if(data.resultMsg) {
									mui.toast(data.resultMsg)
								}
							}
						})
					},
					//删除店铺
					removeShop: function(data, index) {
						if(collection.swith) {
							return
						}
						collection.swith = true
						common.ajax('/shop/favoriteShopOverlay/' + data.shopId, {}, function(data) {
							collection.swith = false
							if(data.code == 1) {
								collection.list.splice(index, 1)
								if(collection.list.length <= 0) {
									mui('#pullrefresh').pullRefresh().refresh(true);
									mui('#pullrefresh').pullRefresh().pullupLoading();
									mui('#pullrefresh').pullRefresh().scrollTo(0, 0, 0.1);
								}
							} else {
								if(data.resultMsg) {
									mui.toast(data.resultMsg)
								}
							}
						})
					},
					openDetail:function(data){
						common.open('../details/details.html', '../details/details.html', data.prodId)
					},
					openshop:function(data){
						common.open("../details/shop.html", "shop.html", data.shopId)
					}
				}
			})

			function pullupRefresh() {
				common.ajax(collection.tapData[collection.checkNum].urls, {
					curPageNO: collection.pageNum++
				}, function(data) {
					console.log(data.data)
					if(data.code == 1) {
						if(collection.pageNum > data.data.pageCount) {
							mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
						} else {
							mui('#pullrefresh').pullRefresh().endPullupToRefresh();
						}

						collection.list = collection.list.concat(data.data.list)
						if(collection.list.length <= 0) {
							$(".noshopp").show()
							$('.mui-pull-bottom-pocket').css('display', 'none !important')
						} else {
							$(".noshopp").hide()
							$('.mui-pull-bottom-pocket').css('display', 'block !important')
						}
					} else {
						mui('#pullrefresh').pullRefresh().endPullupToRefresh()
						if(data.resultMsg) {
							mui.toast(data.resultMsg)
						}
					}
				}, true, 'get')
			}
		</script>
	</body>

</html>